<template>
  <div class="home">
    <ul class="top-row">
      <li v-for="(item,index) in itemArr" :key="index">
        <img :src="item.imgUrl" alt="">
        <p>
          <span>{{item.title}}</span><br>
          <span>{{item.num}}</span>
        </p>
      </li>
    </ul>
    <!-- 组件通信---父传子 必须用单标签 -->
    <!-- v-if:可以直接删除节点 -->
    <Charts :msg="options" v-if="isshow" />
  </div>
</template>

<script>
import { totalData_api } from "@/api/statement.js";
import Charts from "@/components/Charts.vue";
export default {
  components: {
    Charts,
  },
  data() {
    return {
      itemArr: [
        {
          imgUrl: require("@/assets/img/order.png"),
          title: "总订单",
          num: 0,
        },
        {
          imgUrl: require("@/assets/img/money.png"),
          title: "总销售额",
          num: 0,
        },
        {
          imgUrl: require("@/assets/img/num.png"),
          title: "今日订单数",
          num: 0,
        },
        {
          imgUrl: require("@/assets/img/day.png"),
          title: "今日销售额",
          num: 0,
        },
      ],
      options: {
        title: "后台首页数据",
        legend: ["销售额", "订单"],
        xData: [],
        orderData: [],
        amountData: [],
      },
      isshow: false,
    };
  },
  methods: {
    async getTotalData() {
      let res = await totalData_api();
      let { todayOrder, totalAmount, totalOrder, totayAmount } = res.data;
      let newArr = [todayOrder, totalAmount, totalOrder, totayAmount];
      this.itemArr.forEach((item, index) => {
        item.num = newArr[index];
      });
      //此处会遇到一个问题-->axios是异步,echarts是同步,解决：等数据都获取完再画图表
      //图表x轴
      this.options.xData = res.data.xData;
      //图表y轴
      this.options.orderData = res.data.orderData;
      this.options.amountData = res.data.amountData;
      this.isshow = true;
    },
  },
  created() {
    this.getTotalData();
  },
};
</script>

<style lang="less" scoped>
.top-row {
  display: flex;
  justify-content: space-between;
  li {
    width: 210px;
    height: 80px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    img {
      width: 50px;
      height: 50px;
    }
    p {
      span:first-of-type {
        color: #cfcfcf;
        line-height: 30px;
      }
      span:last-of-type {
        color: #333333;
        font-weight: 700;
      }
    }
  }
}
</style>